import { Table } from "antd";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import type { TableProps } from "antd";
import dayjs from "@/utils/dayjs";
import { TZ } from "@/utils/env";
import { changeParams, getListAsync } from "@/store/totalNews/totalNewsSlice";

export interface DataType {
  uuid: string;
  c_time: number;
  channel: number;
  country: string;
  network: string;
  register_count: number;
  invite_count: number;
  total_income: number;
  invite_income: number;
  commission_income: number;
  wd_amount: number;
  wd_user: number;
  adv_watch: number;
  total_income_aver: number;
}

export default function MTable() {
  const dispatch = useAppDispatch();
  const { params, table } = useAppSelector((state) => state.totalNews);

  const {
    config: {
      data: {
        data: { user_channel_list = [] } = {},
      } = {},
    } = {},
  } = useAppSelector((state) => state.app);

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "时间",
      key: "c_time",
      dataIndex: "c_time",
      align: "center",
      render: (text) => dayjs.unix(text).tz(TZ).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "渠道",
      key: "channel",
      dataIndex: "channel",
      align: "center",
      render: (text) =>
        user_channel_list?.find?.((i) => i.value === text)?.label,
    },
    {
      title: "地区",
      key: "country",
      dataIndex: "country",
      align: "center",
    },
    {
      title: "子渠道",
      key: "network",
      dataIndex: "network",
      align: "center",
    },
    {
      title: "注册人数",
      key: "register_count",
      dataIndex: "register_count",
      align: "center",
    },
    {
      title: "邀请人数",
      key: "invite_count",
      dataIndex: "invite_count",
      align: "center",
    },
    {
      title: "总收益",
      key: "total_income",
      dataIndex: "total_income",
      align: "center",
    },
    {
      title: "邀请收益",
      key: "invite_income",
      dataIndex: "invite_income",
      align: "center",
    },
    {
      title: "返佣收益",
      key: "commission_income",
      dataIndex: "commission_income",
      align: "center",
    },
    {
      title: "提现总金额",
      key: "wd_amount",
      dataIndex: "wd_amount",
      align: "center",
    },
    {
      title: "提现总人数",
      key: "wd_user",
      dataIndex: "wd_user",
      align: "center",
    },
    {
      title: "激励视频次数",
      key: "adv_watch",
      dataIndex: "adv_watch",
      align: "center",
    },
    {
      title: "新用户首日人均收入",
      key: "total_income_aver",
      dataIndex: "total_income_aver",
      align: "center",
      render: text => typeof text === 'number' && text.toFixed(2)
    },
  ];

  return (
    <Table
      columns={columns}
      scroll={{ x: "max-content" }}
      bordered
      loading={table.status === "loading"}
      pagination={{
        total: table?.data?.data?.total,
        current: params?.page,
        pageSize: params?.page_size,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total: number, range: [number, number]): string =>
          `${range[0]}-${range[1]}条/共${total}条`,
        onChange: (page: number, pageSize: number): void => {
          dispatch(changeParams({ page, page_size: pageSize }));
          dispatch(
            getListAsync({
              ...params,
              page,
              page_size: pageSize,
            })
          );
        },
      }}
      dataSource={table?.data?.data?.page_data || []}
      size="small"
      rowKey="uuid"
    />
  );
}
